<template>
  <div class="box">
    <el-skeleton :loading="data.isFirst" animated :rows="10">
      <div class="scroll-container">
        <el-timeline>
          <el-timeline-item
            placement="top"
            v-for="(item, index) in data.data"
            :key="index"
            :timestamp="item.time"
            style="padding: 12px 0"
          >
            <div class="record-header">
              <el-link type="primary" style="font-weight: 600">{{ item.name }}</el-link>  <!-- 强调名称 -->
              <label class="result-label">{{ item.result }}</label>
              <label class="location-label">
                <el-icon style="color: #409EFF; margin-right: 4px"><Location /></el-icon>
                {{ item.location }}
              </label>
            </div>

            <el-alert
              :closable="false"
              class="content-card"
              style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1)">
              {{ item.content }}
            </el-alert>

            <div class="status-container">
              <div class="success-rate">
                预估成功率：<span style="color: #666">{{ item.success }}%</span>
              </div>
              <div>
                <el-tag
                  :type="item.isConvert === 1 ? 'success' : 'warning'"
                  size="small"
                  effect="dark"
                  style="border-radius: 12px; padding: 0 10px">
                  {{ item.isConvert === 1 ? '√ 已完成转换' : '未完成转换' }}
                </el-tag>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="action-bar">  <!-- 优化底部操作栏 -->
        <el-button
          type="primary"
          @click="events.add_record"
          class="action-btn"
          size="large">
          + 新增记录
        </el-button>
        <el-button
          type="warning"
          @click="events.convert_Vip"
          class="action-btn"
          size="large">
          ★ 转换为VIP
        </el-button>
      </div>
    </el-skeleton>
  </div>
</template>

<style scoped>
.box {
  position: relative;
  height: calc(100vh - 120px);
  padding-bottom: 60px;
}

.scroll-container {
  max-height: calc(100vh - 200px);
  padding: 0 16px;
  overflow-y: auto;
}

.record-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.result-label {
  color: #909399;
  font-size: 11px;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
}

.location-label {
  color: #606266;
  font-size: 12px;
  margin-left: auto;
}

.content-card {
  margin: 8px 0;
  padding: 12px 16px;
  background: #f0faff;
  font-size: 13px;
  line-height: 1.6;
}

.status-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 8px 0;
}

.action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #ebeef5;
}

.action-btn {
  flex: 1;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
</style>

<script setup lang="ts">
import { Get_Single_Customer_Records } from "@/api/customer";
import { notice } from "@/utils/notice";
import type { Customer_Record_Data } from "@/utils/type";
import { onMounted, reactive } from "vue";

const data = reactive<Customer_Record_Data>({
  isFirst: true,
  data: [],
});

const emit = defineEmits(["add_record"]);

const methods = {
  async bind() {
    const res = await Get_Single_Customer_Records({
      id: sessionStorage.getItem("customer_id") || "",
    });
    if (res.code === 0) {
      data.data = res.data;
    }
  },
};

const events = {
  convert_Vip() {
    notice({
      code: 0,
      message: "这将直接转换为VIP,并自动添加一条跟进记录,确定吗？",
      data: [],
    });
  },
  add_record() {
    emit("add_record", true); // 添加第二个参数表示需要刷新

  },
};

// 在父组件中监听刷新事件（假设父组件使用方式）
// 示例父组件模板：
// <record @add_record="showAddRecord = $event; if($event) methods.bind()"/>

onMounted(async () => {
  await methods.bind();
  data.isFirst = false;
});
</script>